<template>
  <div class="search-container">
    <div class="search-button">
      <el-button class="export" type="primary">导出</el-button>
      <el-button class="delete" type="primary">删除</el-button>
    </div>
    <div class="search-input">
      <el-input  v-model="search" prefix-icon="el-icon-search" placeholder="搜索课程"></el-input>
      <el-button class="increase" type="success" icon="el-icon-plus" circle></el-button>
    </div>
   
  </div>
</template>

<script>
export default {
 data() {
    return {
      search: ''
    }
  },
}
</script>

<style lang="less" scoped>
.search-container{
  height: 40px;
  display: flex;
  justify-content: space-between;
  /deep/.el-input__inner{
    width: 220px;
    height: 26px;
  }
  .search-input{
    margin-bottom:10px;
    display:flex;
    align-items: center;
    /deep/.el-input__icon{
      line-height: 26px;
    }
    /deep/.el-button.is-circle{
      width: 30px;
      height: 30px;
    }
    .el-button.is-circle{
      padding: 8px;
    }
    .el-button--success{
      background-color: #03d3c6;
      border-color:#03d3c6;
      margin-left:10px;
    }
  }
  .search-button{
      .export{
      border-radius:15px 15px 0 0;
      width: 86px;
      height: 40px;
      background: white;
      border: white;
      color: #333;
    }
    .delete{
      border-radius:15px 15px 0 0;
      width: 86px;
      height: 40px;
      background: rgb(240, 249, 247);
      border: rgb(240, 249, 247);
      color: #333;
    }
  }
}
</style>